<script setup>
import { reactive } from 'vue'
import request from '@/utils'
import { Toast } from 'vant'
import { useRouter } from 'vue-router'
const router = useRouter()
const onSubmit = async (form) => {
  let res = await request.post('/login/verifyLogin', {
    userName: ''
  })
  const { success, data } = res
  console.log(res)
  router.push('/home')
  if (success && data.timeOut != '1') {
    Toast('长期未登录，请接收并填写验证码后登录')
    return
  }
}
const handleLogin = async () => {
  let sendObj = {}
  const res = await request.post('/login', sendObj)
  console.log(res)
}

const formField = reactive({
  uname: '',
  upwd: '',
  uid: '',
  checkNum: '',
  checkNumInput: ''
})
</script>

<template>
  <div class="loggin-container">
    <div class="logo">
      <!-- <img src="./img/login-logo.jpg" alt="" /> -->/
      <h2>登录logo</h2>
    </div>
    <div>
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="formField.uname"
            name="uname"
            label="手机号"
            left-icon="phone"
            placeholder="请输入手机号"
            maxlength="11"
            type="tel"
            :rules="[{ required: true, message: '请输入手机号' }]"
          />
          <van-field
            v-model="formField.upwd"
            type="password"
            name="upwd"
            label="密码"
            left-icon="lock"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请输入密码' }]"
          />
        </van-cell-group>
        <div style="margin: 16px">
          <p class="tool-bar">
            <van-checkbox v-model="formField.checked" shape="square">记住账号</van-checkbox>
            <span>忘记密码?</span>
          </p>
          <van-button style="margin: 16px 0" block type="primary" native-type="submit" size="small">
            登录
          </van-button>
        </div>
        <div class="center main-color">支持IPV6网络</div>
      </van-form>
    </div>
  </div>
</template>

<style scoped lang="less">
.loggin-container {
  .logo {
    height: 40vh;
  }
  .logo h2 {
    width: 100%;
    max-height: 40%;
  }
  :deep(.van-field__left-icon) {
    color: #bbb;
    padding-right: 6px;
  }
  :deeep(.van-field__label) {
    width: 3em;
  }
  :deep(.van-cell) {
    padding-right: 0;
    padding-left: 0;
  }
  :deep(.van-checkbox__icon) {
    font-size: 16px;
  }
  .main-color {
    font-size: 12px;
  }
  .tool-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--van-blue);
    :deep(.van-checkbox__label) {
      color: var(--van-blue);
    }
  }
}
</style>
